/* css Zen Garden submission 217 - 'Screen Filler', by Elliot Jay Stocks, http://elliotjaystocks.com/  */
/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/  */

        /* TYPEKIT_KIT_ID: lxq7gid */

        /*
        ================================================
        CSS Zen Garden theme for Typekit 01
        ================================================
        Handcrafted by Elliot Jay Stocks
        http://elliotjaystocks.com/
        Last updated on 18.11.2013
        ================================================
        01	Sensible Defaults
        02	Typography
        03	Layout
        04	Media Queries
        ================================================
        */

        /* ----------------------------------------------------------------------------------------------------------
        01 Sensible defaults ----------------------------------------------------------------------------------------
        ---------------------------------------------------------------------------------------------------------- */

        *                                                               { margin:0; padding:0; /* So sue me */ }

        div,
        article,
        section,
        header,
        footer,
        nav,
        figure,
        li								{ position:relative; } /* For absolutely positioning elements within containers  */
        .group:after                                    { display: block; height: 0; font-size: 0; content: "."; clear: both; visibility: hidden; } /* For clearing */
        *								{ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } /* Apply a natural box layout model to all elements â€” see http://paulirish.com/2012/box-sizing-border-box-ftw */

        ::-moz-selection                                { background:#333; color:#fff; }
        ::selection                                     { background:#333; color:#fff; }

        /* ----------------------------------------------------------------------------------------------------------
        02 Typography -----------------------------------------------------------------------------------------------
        ---------------------------------------------------------------------------------------------------------- */
        /*

        14 / 16	=               0.875em                 (14px equivalent)
        16 / 16	=               1em                     (16px equivalent)
        18 / 16 =               1.125em                 (18px equivalent)
        21 / 16 =               1.3125em                (21px equivalent)
        24 / 16 =               1.5em                   (24px equivalent)
        30 / 16 =               1.875em                 (30px equivalent)
        36 / 16 =               2.25em                  (36px equivalent)
        48 / 16 =               3em                     (48px equivalent)
        60 / 16 =               3.75em                  (60px equivalent)
        72 / 16 =               4.5em                   (72px equivalent)
        96 / 16 =               6em                     (96px equivalent)

        */

        /* Rendering */
        body,
        input,
        textarea                                                { color:#333; /*-webkit-font-smoothing:antialiased;*/ }

        /* Families */
        body							{ font-family:"tablet-gothic", verdana, arial, sans-serif; /* Weights from Typekit: 300, 400 */ }
        h2,
        h3                                                              { font-family:"tablet-gothic-condensed", "arial narrow", arial, verdana, sans-serif; /* Weights from Typekit: 200, 900 */ }

        /* Headings */
        h1,
        h2,
        h3,
        h4,
        h5,
        h6                                                              { font-weight:normal; }
        h1                                                              { background:#ea2e49; color:#fff; display:inline-block; margin-bottom:1em; padding:0.5em 1em; }
        h2                                                              { color:#fff; font-weight:900; /* Heavy */ font-size:6em; letter-spacing:1px; line-height:1em; }
        h3                                                              { font-size:2.25em; font-weight:200; /* Thin */ letter-spacing:1px; line-height:1em; padding:0.5em 0 0.25em 0; }

        /* Links */
        a                                                               { border-bottom:1px solid rgba(0,0,0,0.2); color:#333; text-decoration:none; -moz-transition:border-color 0.2s ease-in-out; -ms-transition:border-color 0.2s ease-in-out; -o-transition:border-color 0.2s ease-in-out; -webkit-transition:border-color 0.2s ease-in-out; transition:border-color 0.2s ease-in-out; }
        a:hover                                                 { border-color:#ea2e49; }
        section.intro div.summary p a,
        div.explanation p a,
        div.participation p a			{ color:#fff; }
        div.participation p a:hover		{ border-color:#fff; }

        /* Paragraph styles */
        p,
        li                                                              { font-size:1em; font-weight:400; /* Regular */ line-height:1.5em; padding:0.5em 0; }
        h1,
        section.intro div.summary p,
        div.requirements p:last-child   { font-weight:300; letter-spacing:2px; text-transform:uppercase; }
        section.intro div.summary p:last-child,
        div.requirements p:last-child   { border-top:1px solid #ea2e49; margin-top:1em; padding-top:1.5em; }

        /* Other bits & bobs */
        em,
        strong                                                  { font-style:normal; font-weight:400; }

        /* ----------------------------------------------------------------------------------------------------------
        03 Layout ---------------------------------------------------------------------------------------------------
        ---------------------------------------------------------------------------------------------------------- */

        html                                                    { background:#daede2; padding:5%; }
        body                                                    { background:#77c4d3; }
        div.page-wrapper                                { z-index:2; }

        section.intro                                   { padding:5%; }
        section.intro div.summary               { color:#fff; padding:15% 0; }
        section.intro div.preamble              { background:rgba(255,255,255,0.9); color:#333; margin-left:-30%; padding:5% 5% 5% 30%; }
        div.main                                                { padding:5%; }
        aside.sidebar                                   { background:rgba(246,247,146,0.9); padding:5%; }
        aside.sidebar ul                                { padding:0.5em 0 2em 0; }
        aside.sidebar ul li                     { color:rgba(0,0,0,0.4); list-style:none; margin:0; padding:0 0 0.825em 0; }
        footer                                                  { background:rgba(246,247,146,0.9); clear:both; color:#fff; padding:1em 5%; width:50%; }
        footer a                                                { margin-right:0.5em; }

        div.explanation                                 { color:#fff; padding:5%; }
        div.participation                               { background:rgba(234,46,73,0.9); color:#fff; padding:5%; }
        div.benefits                                    { background:rgba(255,255,255,0.9); margin-top:10%; padding:5%; }
        div.requirements                                { background:rgba(255,255,255,0.9); padding:5%; }

        /* ----------------------------------------------------------------------------------------------------------
        04 Media queries (using a mobile-first approach) ------------------------------------------------------------
        ---------------------------------------------------------------------------------------------------------- */

        /* 1 and up */
        @media screen and (min-width:1px) {

                body                                            { font-size:85%; }

        }


        /* 550 and up */
        @media screen and (min-width:550px) {

                h2                                                      { font-size:8em; }
                section.intro                           { width:66.6%; }
                aside.sidebar                           { position:absolute; right:0; top:2.5%; width:32.75%; }
                div.extra1                                      { background:rgba(51,55,69,0.9); bottom:0; right:0; position:fixed; top:0; width:30%; z-index:1; }
                div.explanation                         { float:left; width:50%; }
                div.participation                       { float:left; width:49%; }
                div.benefits                            { float:left; }
                div.requirements                        { float:left; }
        }

        /* 650 and up */
        @media screen and (min-width:650px) {

                div.benefits                            { margin-top:12%; width:30%; }
                div.requirements                        { width:69%; }

        }

        /* 700 and up */
        @media screen and (min-width:700px) {

                body                                            { font-size:90%; }

        }

        /* 800 and up */
        @media screen and (min-width:800px) {

                body                                            { font-size:100%; }

        }

        /* 900 and up */
        @media screen and (min-width:900px) {

                body                                            { font-size:110%; }

        }

        /* 1500 and up */
        @media screen and (min-width:1500px) {

                body                                            { font-size:125%; }

        }

        /* 1800 and up */
        @media screen and (min-width:1800px) {

                body                                            { font-size:150%; }

        }

        /* 2100 and up */
        @media screen and (min-width:2100px) {

                body                                            { font-size:175%; }

        }


        /* 2500 and up */
        @media screen and (min-width:2500px) {

                body                                            { font-size:200%; }

        }
